<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <style>
        .ghbs tr:nth-child(2n){
            background-color: aquamarine;
        }
        .ghbs tr:nth-child(2n-1){
            background-color: aqua;
        }
        #yrbs tr:hover{
            background-color:bisque;
        }
    </style>

</head>

<body>
    <div class="box">
        <!-- 模态框显示按钮 -->
        <button onclick="f1()">添加商品</button>
        <!-- 搜索布局 -->
        <input type="text" class="ss">
        <button onclick="ss()">搜索</button>
        <!-- 区间搜索 -->
        <input type="text" id="min" placeholder="请输入最低价格">
        <input type="text" id="max" placeholder="请输入最高价格">
        <button onclick="qj()">根据区间搜索</button>
        <!-- 排序 -->
        <button onclick="px()">按照价格排序</button>
        <!-- 批量删除 -->
        <button>批量删除</button>
        <!-- 隔行变色 -->
        <button onclick="ghbs(this)">开启隔行变色</button>
        <!-- 移入变色 -->
        <button onclick="yrbs(this)">开启移入变色</button>
        <!-- 模态框开始 -->
        <div class="mtk">
            商品名称：<input type="text" id="shopname"><br><br> 商品数量：
            <input type="text" id="num"><br><br> 商品单价：
            <input type="text" id="price"><br><br> 商品种类：
            <select>
                <option value="食品">食品</option>
                <option value="玩具">玩具</option>
                <option value="衣服">衣服</option>
                <option value="电子设备">电子设备</option>
            </select>
            <br><br> 添加验证：
            <input type="text" id="yzm"><button>获取验证码</button><span></span>
            <br><br>
            <button onclick="add()">添加</button>
            <button onclick="gb()">关闭</button>
        </div>
        <div class="zzc"></div>
        <!-- 模态框结束 -->

        <!-- 表格区域开始 -->
        <table border="1" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th><input type="checkbox" id="all"></th>
                    <th>编号</th>
                    <th>商品名称</th>
                    <th>种类</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody align="center">

            </tbody>
            <tr>
                <td colspan="8">
                    商品总数为<span class="sum1">0</span> 商品总价为
                    <span class="sum2">0</span>
                </td>
            </tr>
        </table>
        <!-- 表格区域结束 -->

        <!-- 修改模态框 -->
        <div class="xgmtk">
            商品名称：<input type="text" id="xgshop"> 商品数量：
            <input type="text" id="xgnum"> 商品价格：
            <input type="text" id="xgprice">
            <button>修改提交</button>
        </div>

        <!-- 拉黑表格 -->
        <p>黑名单</p>
        <ul id="hmd">

        </ul>

    </div>
</body>

</html>
<script>
    var mtk = document.querySelector('.mtk')
    var zzc = document.querySelector('.zzc')
    var yzm = document.querySelector('.yzm')
    var sname = document.querySelector('#shopname')
    var num = document.querySelector('#num')
    var price = document.querySelector('#price')
    var select = document.querySelector('select')
    var tb = document.querySelector('tbody')
    var xgmtk = document.querySelector('.xgmtk')
    var s1 = document.querySelector('.sum1')
    var s2 = document.querySelector('.sum2')
    var s = document.querySelector('.ss')
    var min = document.querySelector('#min')
    var max = document.querySelector('#max')

    function f1() {
        mtk.style.display = 'block'
        zzc.style.display = 'block'
    }
    function gb() {
        mtk.style.display = 'none'
        zzc.style.display = 'none'
    }
    function set(arr) {
        localStorage.setItem('data', JSON.stringify(arr))
    }
    function get() {
        var data = localStorage.getItem('data')
        if (data != null) {
            return JSON.parse(data)
        } else {
            return []
        }
    }
    function add() {
        var data = get()
        data.push({
            mc: sname.value,
            sl: num.value,
            dj: price.value,
            lx: select.value
        })
        set(data)
        xr()

    }
    xr()
    function xr(arr) {
        tb.innerHTML = ''
        var data =arr?arr: get()
        var zjs=0;
        var zj=0;
        for (i = 0; i < data.length; i++) {
            var tr = document.createElement('tr')
            tr.innerHTML = `
                <td><input type="checkbox" id="all"></td>
                <td>${i + 1}</td>
                <td>${data[i].mc}</td>
                <td>${data[i].lx}</td>
                <td>${data[i].sl}</td>
                <td>${(data[i].dj*1).toFixed(2)}</td>
                <td>${(data[i].dj * data[i].sl).toFixed(2)}</td>
                <td><button onclick=xg()>修改</button><button>删除</button><button onclick='sy(${i})' ${i==0?'disabled' :''}>上移</button><button onclick='xy(${i})' ${i==data.length-1?'disabled' :''}>下移</button></td>
            `
            tb.appendChild(tr)
            zjs+=data[i].sl-0
            zj+=data[i].dj * data[i].sl
            sname.value=''
            num.value=''
            price.value='' 
            mtk.style.display = 'none'
            zzc.style.display = 'none'
        }
        s1.innerHTML=zjs;
        s2.innerHTML=zj.toFixed(2)
    }
    function xg() {
        xgmtk.style.display = 'block'
    }
    function ghbs(a){
        if(a.innerHTML=='开启隔行变色'){
            a.innerHTML='关闭隔行变色'
            tb.className='ghbs'
        }else{
            a.innerHTML='开启隔行变色'
            tb.className=''
        }
    }
    function yrbs(a){
        if(a.innerHTML=='开启移入变色'){
            a.innerHTML='关闭移入变色'
            tb.id='yrbs'
        }else{
            a.innerHTML='开启移入变色'
            tb.id=''
        }
    }
    function ss(){
        var data=get()
        var arr= data.filter(function(ele,i){
            return ele.mc==s.value
        })
        xr(arr)
    }
    function qj(){
        var data=get()
        var arr= data.filter(function(ele,i){
            return ele.dj/1>=min.value&&ele.dj*1<=max.value
        })
        xr(arr)
    }
    function px(){
        var data=get()
        var arr=data.sort(function(a,b){
            return a.dj-b.dj
        })
        xr(arr)
    }
    function xy(i){
        var data=get()
        var c=data[i+1]
        data[i+1]=data[i]
        data[i]=c
        set(data)
        xr()
    }
    function sy(i){
        var data=get()
        var c=data[i-1]
        data[i-1]=data[i]
        data[i]=c
        set(data)
        xr()
    }
</script>